<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        placeholder="店铺名称"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreate"
      >
        添加店铺
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="店铺名称" prop="name" align="center" />
      <el-table-column label="地址" prop="address" align="center" />
      <el-table-column label="联系电话" prop="phone" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="店铺名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="店铺地址" prop="address">
          <el-input v-model="form.address" @focus="showMapDialog"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 地图选择器对话框 -->
    <el-dialog title="选择位置" :visible.sync="mapVisible" width="80%">
      <div class="map-container">
        <div id="map" style="height: 500px;"></div>
        <div class="map-search">
          <el-input
            v-model="searchAddress"
            placeholder="请输入地址"
            @keyup.enter.native="searchLocation"
          >
            <el-button slot="append" icon="el-icon-search" @click="searchLocation"></el-button>
          </el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="mapVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmLocation">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ShopList',
  data() {
    return {
      list: [],
      listLoading: false,
      listQuery: {
        name: ''
      },
      dialogVisible: false,
      dialogTitle: '',
      mapVisible: false,
      form: {
        name: '',
        address: '',
        phone: '',
        latitude: '',
        longitude: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请选择店铺地址', trigger: 'blur' }
        ]
      },
      searchAddress: '',
      map: null,
      marker: null,
      geocoder: null
    }
  },
  mounted() {
    this.getList()
    this.initBMap()
  },
  methods: {
    getList() {
      this.listLoading = true
      // 调用获取店铺列表API
      setTimeout(() => {
        this.list = [
          {
            id: 1,
            name: '测试店铺1',
            address: '北京市朝阳区xxx街道',
            phone: '13800138000'
          }
        ]
        this.listLoading = false
      }, 1000)
    },
    initBMap() {
      // 异步加载百度地图
      const script = document.createElement('script')
      script.src = `https://api.map.baidu.com/api?v=3.0&ak=${process.env.VUE_APP_BAIDU_AK}&callback=initMap`
      document.body.appendChild(script)
      
      window.initMap = () => {
        this.map = new BMap.Map('map')
        const point = new BMap.Point(116.404, 39.915) // 默认北京市中心
        this.map.centerAndZoom(point, 15)
        this.map.enableScrollWheelZoom()
        this.map.addControl(new BMap.NavigationControl())
        this.map.addControl(new BMap.ScaleControl())
        
        this.geocoder = new BMap.Geocoder()
        
        // 点击地图设置标记
        this.map.addEventListener('click', (e) => {
          this.setMarker(e.point)
          this.getAddress(e.point)
        })
      }
    },
    showMapDialog() {
      this.mapVisible = true
      this.$nextTick(() => {
        this.map.resize()
      })
    },
    setMarker(point) {
      if (this.marker) {
        this.map.removeOverlay(this.marker)
      }
      this.marker = new BMap.Marker(point)
      this.map.addOverlay(this.marker)
    },
    getAddress(point) {
      this.geocoder.getLocation(point, (result) => {
        if (result) {
          this.form.address = result.address
          this.form.latitude = point.lat
          this.form.longitude = point.lng
        }
      })
    },
    searchLocation() {
      if (!this.searchAddress) return
      
      this.geocoder.getPoint(this.searchAddress, (point) => {
        if (point) {
          this.map.centerAndZoom(point, 16)
          this.setMarker(point)
          this.getAddress(point)
        } else {
          this.$message.error('未找到该地址')
        }
      })
    },
    confirmLocation() {
      if (!this.form.address) {
        this.$message.warning('请先在地图上选择位置')
        return
      }
      this.mapVisible = false
    },
    handleCreate() {
      this.dialogTitle = '添加店铺'
      this.form = {
        name: '',
        address: '',
        phone: '',
        latitude: '',
        longitude: ''
      }
      this.dialogVisible = true
    },
    handleUpdate(row) {
      this.dialogTitle = '编辑店铺'
      this.form = Object.assign({}, row)
      this.dialogVisible = true
    },
    handleDelete(row) {
      this.$confirm('确认删除该店铺?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用删除API
        this.$message.success('删除成功')
        const index = this.list.indexOf(row)
        this.list.splice(index, 1)
      })
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 调用保存API
          this.$message.success(this.dialogTitle === '添加店铺' ? '添加成功' : '更新成功')
          this.dialogVisible = false
          this.getList()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.map-container {
  position: relative;
  
  .map-search {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 300px;
    z-index: 1000;
  }
}
</style> 